<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				color: #cccccf;
				/* 设置全局字体颜色 */
				background-color: ;
				/* 设置背景颜色 */
			}

			.search-container {
				text-align: center;
			}

			input[type="text"] {
				padding: 10px;
				width: 300px;
				border: 1px solid #ccc;
				border-radius: 5px;
				font-size: 16px;
			}

			button {
				padding: 10px 20px;
				background-color: #007bff;
				color: white;
				border: none;
				border-radius: 5px;
				cursor: pointer;
				font-size: 16px;
				margin-left: 10px;
			}

			button:hover {
				background-color: #0056b3;
			}

			.but {
				background: #cccccf;
				margin-left: 12px;
				padding: 5px 16px;
			}

			.sc {
				background: #cccccf;
				margin-left: 12px;
				padding: 5px 16px;
			}

			.comment {
				border-bottom: 1px solid #cccccf;/* 只显示下边框 */
				padding: 5px 10px;/* 调整内边距 */
				margin: 5px 10px;
			} 

			.user {
				font-weight: bold;
				color: #333;
			}

			.timestamp {
				font-size: 0.9em;
				color: #666;
			}

			.fans {
				color: #ff6600;
				font-size: 0.8em;
			}

			.container {
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.avatar {
				width: 48px;/* 设置头像宽度 */
				height: 48px;/* 设置头像高度 */
				border-radius: 50%;/* 将头像设置为圆形 */
				overflow: hidden;/* 确保图像不会超出圆形边界 */
				border: 2px solid #ccc;/* 可选：添加边框 */
			}

			.avatar img {
				width: 100%;/* 使图像填充整个容器 */
				height: auto;/* 保持图像比例 */
			}
			
			.container {
			    width: 300px;
			    margin: 20px;
			}
			.actions {
			    margin-bottom: 10px;
			}
			.comment {
			    display: flex;
			    align-items: center;
			    margin-bottom: 10px;
			}
			.comment input[type="checkbox"] {
			    margin-right: 10px;
			}
			.qx{
				background: #cccccf;
				margin-left: 12px;
				padding: 5px 16px;
			}
			
			.fans-badge {
				position: absolute;
			    background-color: #ffcccb;
			    color: #ff0000;
			    font-size: 12px;
			    padding: 2px 5px;
			    border-radius: 3px;
				margin-left: 8px;
				font-weight: 100;
				
			}
			.view-comments {
			    color: #FF1493;
			    cursor: pointer;
			    margin-top: 5px;
			}
			.hidden-comments {
			    display: none;
			    margin-top: 10px;
			}
			.right-border{
				padding-left: 75%;
			}
			.select-all-container{
				float: left;
			}
			#selectAll,#deleteSelected{
				background: #FF1493;
			}
			a{
				color:#cccccf;
				text-decoration: none;
			}
			a:hover{
				color:#FF1493;
			}
			.commentList{
				margin-top: 20px;
			}
			.recoverinput{
				border-radius:10px 10px 10px 10px ;
				border: none;
				resize: none;
				overflow-y: visible;
				margin-top:5px;
				margin-bottom:5px;
				width: 75%;
				height: 80px;
				font-size: 15px;
				color:	#8a8a8c;
				overflow: auto;
				padding: 5px 10px 5px 80px;
			}
			.recoverBox{
				width: 900px;
				height: 100px;
				border: 1px solid pink;
			}
		</style>
		<link rel="stylesheet" href="../css/index.css">
		<link rel="stylesheet" href="../css/gun.css">
		<script src="../js/vue.js"></script>
		<!-- axios用来向后端发送请求-->
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<link href="../layui/css/layui.css" rel="stylesheet">
		<script src="../js/common.js"></script>

	</head>
	<body>
		<div id="app">
			<div>用户可见评论</div>
			<div></div><br>
			<div class="select-all-container">
				<label for="select-all-checkbox">
					<button class="qx" id="selectAll">全选</button>
				</label>
				<button class="sc" id="deleteSelected">删除</button>
			</div>
			<div class="right-border">
				<a href="#" @click="sortComment">最近发布</a>&nbsp;|&nbsp;
				<a href="#" @click="sortComment">点赞最多</a>&nbsp;
				
			</div>
			
			<!-- 评论列表 -->
			<div id="commentList" class="commentList">
				<div class="comment" v-for="c in myCommentList" v-if="c.commentContent!='该条评论已被删除'">
					<input type="hidden" :value="c.cid"/>
					<input type="checkbox" class="commentCheckbox">
					<div class="avatar"><img :src="c.userinfo.headImg" alt="头像"></div>&nbsp;&nbsp;&nbsp;
					<div>
						<div class="user">
							<span style="font-size: 16px;">{{c.userinfo.userName}}</span>
							<label v-if="c.buserinfo!=null">
								<span style="color: dimgray;font-weight: normal;padding: 0px 8px;">回复</span>@{{c.buserinfo.userName}}<span style="color: dimgray;font-weight: normal;padding: 0px 8px;">的评论</span>
								<div class="view-comments" :onclick="'toggleComments('+c.cid+')'" style="margin-top: -18px;margin-left: 1194px;font-weight: normal;">查看评论</div>
							</label>
							<label v-if="c.userinfo.isFans==1 && c.buserinfo==null"><span class="fans-badge">粉丝</span></label>
						</div>
						<div style="padding: 10px 0px;">{{c.commentContent}}</div>
						
						<div :class="'replyComment'+c.cid" style="width: 1100px;border: 1px solid gainsboro;height: 100px;display: none;" v-if="c.parentId!=0">
							<div style="position: absolute; margin-top: 16px;"><img :src="c.buserinfo.headImg" width="50px" height="50px" alt="头像"></div>&nbsp;&nbsp;&nbsp;
							<br/>
								<span style="position: absolute; margin-left: 60px;display: block;margin-bottom: 40px;font-weight: bold;" >{{c.buserinfo.userName}}</span>
								<div style="font-size: 13px;padding-top: 24px;margin-left: 60px;">{{c.parentCommenttable.commentContent}}</div>
								<div class="timestamp" style="padding: 10px 10px 10px 60px;">{{c.parentCommenttable.commentTime}}</div>
							<br />
						</div>
						
						<div class="timestamp" style="padding: 6px 0px;">{{c.commentTime}}&nbsp;&nbsp;&nbsp;
						<i class="layui-icon layui-icon-praise" :onclick="'praiseComment('+c.cid+')'" style="font-size: 12px; color:#cccccf;">点赞</i>
						<span data-v-548917d5 class="icon-text" @click="showSend(c.cid)">&nbsp;&nbsp;&nbsp;回复</span></div><br>
						
						<div :id="'recover'+c.cid" class="recoverBox" style="display: none;" >
							<img style="position: absolute;padding: 10px 0px 10px 10px;border-radius: 50%;" :src="c.userinfo.headImg" width="60px" height="60px"/>
							<textarea placeholder="请自觉遵守互联网相关政策,严禁发布色情,暴力,反动的言论" class="recoverinput"></textarea>
							<button style="position: absolute;padding:20px 10px 20px 10px;background: #FF1493;margin-top: 10px;" @click="sendCommenttable(c)">发表评论</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				uid:0,
				myCommentList:[],
				userinfo:{}
			},
			methods:{
				sortComment(){
					var choose=event.target.innerHTML
					axios.post(API+'sortComment',{
						"list":this.myCommentList,
						"sortChoose":choose
					}).then(response => {
						this.myCommentList=response.data
					}).catch(error => {
						console.error(error);
					});
				},
				sendCommenttable(c){
					var oldCommtent=c.commentContent
					c.commentContent=document.querySelector("#recover"+c.cid+" textarea").value
					console.log(c.commentContent)
					axios.post(API+'requestComment',{
						"comment":c,
						"userid":this.uid
					}).then(response => {
						if(response.data=="发送成功！"){
							this.$message({
								  message: response.data,
								  type: 'success'
							});
							document.querySelector("#recover"+c.cid+" textarea").value="";
							c.commentContent=oldCommtent
						}else{
							this.$message.error(response.data);
						}
					}).catch(error => {
						console.error(error);
					});
				},
				showSend(id){
					//展示回复框
					var box=document.getElementById("recover"+id);
					if(box.getAttribute("style","display")=="display: none;"){
						box.style.display="block";
					}else{
						box.style.display="none";
					}
					
				}
			},
			mounted() {
				this.uid=localStorage.getItem("userid")
				axios.get(API+'myReleaseComment?userid='+this.uid).then(response => {
					this.myCommentList = response.data
					console.log(response.data)
				}).catch(error => {
					console.error(error);
				});
				//当前登录用户信息
				axios.get(API+'selectUserInfo?userid='+this.uid).then(response => {
					this.userinfo = response.data
					console.log(response.data)
				}).catch(error => {
					console.error(error);
				});
			}
		})
	</script>
	<script>
	    // 全选功能
	    document.getElementById("selectAll").addEventListener("click", () => {
	        const checkboxes = document.querySelectorAll(".commentCheckbox");
	        checkboxes.forEach(checkbox => {
	            checkbox.checked = true;
	        });
	    });
	
	    // 删除功能
	    document.getElementById("deleteSelected").addEventListener("click", () => {
	        const checkboxes = document.querySelectorAll(".commentCheckbox");
			var delList=[]
	        checkboxes.forEach(checkbox => {
	            if (checkbox.checked) {
					//删除的评论集合
					delList.push(checkbox.closest(".comment").firstChild.value)
					checkbox.closest(".comment").remove();
	            }
	        });
			//console.log(delList)
			axios.post(API+'delComment',{
				"cidList":delList
			}).then(response => {
				alert(response.data)
			}).catch(error => {
				console.error(error);
			});
			
	    });
		
		
		//查看评论
		function toggleComments(cid) {
		        const hiddenComments = document.getElementsByClassName("replyComment"+cid)[0];
		        if (hiddenComments.style.display === "none") {
		            hiddenComments.style.display = "block";
					event.target.innerHTML="收起评论"
		        } else {
		            hiddenComments.style.display = "none";
					event.target.innerHTML="查看评论"
		        }
		}
		
		//点赞评论
		function praiseComment(commentId){
			var userid=localStorage.getItem("userid")
			console.log(event.target.style.color)
			if(event.target.style.color=="rgb(204, 204, 207)"){
				event.target.style.color="pink"
				axios.get(API+'upvoteComment?cid='+commentId+"&userid="+userid).then(response => {
					alert(response.data)
				}).catch(error => {
					console.error(error);
				});
			}else{
				event.target.style.color="rgb(204, 204, 207)"
				axios.get(API+'cancelUpvoteComment?cid='+commentId+"&userid="+userid).then(response => {
					alert(response.data)
				}).catch(error => {
					console.error(error);
				});
			}
			
		}
	</script>
</html>